const messages = document.getElementById('messages')
function addMessage(message) {
	let sender = message.sender
	if (typeof sender !== 'string')
		sender = '???'

	let date = message.date
	if (typeof date !== 'date')
		date = new Date()
	date = date.toLocaleString()

	let text = message.text

	let event = document.createElement('div')
	event.className = 'event'

	let label = document.createElement('div')
	label.className = 'label'
	label.setAttribute('data-text', sender.substring(0, 2))
	event.appendChild(label)

	let content = document.createElement('div')
	content.className = 'content'

	let summary = document.createElement('div')
	summary.className = 'summary'

	let summarySender = document.createElement('span')
	summarySender.innerText = sender
	summary.appendChild(summarySender)

	let summaryDate = document.createElement('span')
	summaryDate.className = 'date'
	summaryDate.innerText = date
	summary.appendChild(summaryDate)

	content.appendChild(summary)

	let extraText = document.createElement('div')
	extraText.className = 'extra text'
	extraText.innerText = text
	content.appendChild(extraText)

	event.appendChild(content)

	messages.appendChild(event)
	messages.scrollTop = messages.scrollHeight
}